<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>选择城市</title>
	<link rel="stylesheet" href="./css/m_default.css">
	<script src="./js/1.9.1-jquery.min.js"></script>
	<script src="./js/flexible.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.wrap {
			padding-bottom: 1rem;
		}

		.list:not(:first-of-type) {
			margin-top: .2rem;
		}

		.list h5 {
			background: pink;
			color: #fff;
			padding: .2rem;
		}

		.list p {
			padding: .1rem .2rem;
			position: relative;
		}

		.list p:after {
			content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			width: 97%;
			height: 1px;
			background: #000;
			transform-origin: 0 0;
			transform: scaleY(.5);
		}

		.sel {
			color: red;
		}

		.ping {
			position: fixed;
			right: .3rem;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
		}

		.ping p {
			font-size: .32rem;
			padding: .02rem .1rem;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="wrap">
		</div>
		<div class="ping">
		</div>
	</div>

	<script src="./js/bscroll.min.js"></script>
	<script>
		var base_url = 'http://sz.mofing.com/';
		var obj = {};
		var arr = []; //字母集合
		var arrs = []; //offsetTop数据集合
		var str = '';
		var strr = '';
		var id = 0;
		var name = '';
		var index = 0;
		var c_index = 0;
		$.post(base_url + 'firework/claim-stores/choosecitys.json', {}, function (data) {
			if (data.code === 200) {
				obj = data.data;
				for (let k in obj) {
					arr.push(k);
					str += '<div class="list">';
					str += '<h5 class="index_' + c_index + '">' + k + '</h5>';
					for (let i = 0; i < obj[k].length; i++) {
						str += '<p id="' + obj[k][i].id_area + '">' + obj[k][i].name + '</p>';
					}
					str += '</div>';
					c_index++;
				}
				$('.wrap').append(str);
				for (let i = 0; i < arr.length; i++) {
					strr += '<p>' + arr[i] + '</p>';
					arrs.push($('.index_' + i).offset().top);
				}
				//console.log(arrs);														
				$('.ping').append(strr);
			}
		});
		//选择城市
		$('.wrap').on('click', 'p', function () {
			name = $(this).html();
			id = $(this).attr('id');
			$(this).addClass('sel').siblings().removeClass('sel');
			$(this).parent().siblings().children().removeClass('sel');
		});
		//选择拼音
		$('.ping').on('click', 'p', function (ev) {
			ev.stopPropagation();
			index = $(this).index();
			$(this).addClass('sel').siblings().removeClass('sel');
			var H = $('.index_' + index).offset().top;
			$('html,body').animate({
				scrollTop: H + 1
			}, 400);
		});
		//监听scroll
		$(window).on('scroll', function () {
			var sctop = $(window).scrollTop();
			//index随滚动条变化			
			/* for(let i=arrs.length;i>0;i--) {
				if(arrs[i-1] < sctop) {
					index = i-1;
					break;
				}
			} */
			for (let i = 0; i < arrs.length; i++) {
				if (arrs[i] < sctop) {
					index = i;
				}
			}
			//console.log(index);			
			$('.ping>p').eq(index).addClass('sel').siblings().removeClass('sel');
		});
	</script>
</body>

</html>